<template>
    <div class="authorBox">
        <search-title></search-title>
        <section class="wrap">
            <loading loadingStyle="height:200px;background-size:100px" v-if="!userInfo"></loading>
            <header class="authorHead clearfix" v-else>
                <div class="authorHeadLeft">
                    <div class="authorTitle">
                        <img :src="userInfo.avatar" alt="">
                    </div>
                    <div class="authorInfo">
                        <p>{{userInfo.name}}</p>
                        <p>{{userInfo.sign}}</p>
                    </div>
                </div>
                <div class="authorHeadRight">
                    <p>{{userInfo.datanum}}</p>
                    <p>素材</p>
                </div>
            </header>
            <div class="authorContent"> 
                 <el-tabs v-model="activeName" @tab-click="handleClick">
                    <el-tab-pane label=" 个人作品 " name="presWorks">
                        <div class="presWorksChild">
                            <el-tabs v-model="activeName2" @tab-click="handleClick2" :lazy="true">
                                <el-tab-pane label="3D模型" name="3DMode" :lazy="true">
                                    <mode-list length="12" toUrl="modeInfo" modeType="1" @parentInfo="parentMsg"></mode-list>
                                </el-tab-pane>
                                <el-tab-pane label="SU模型" name="suMode" :lazy="true">
                                    <mode-list length="12" toUrl="ModeInfoSu" modeType="2" @parentInfo="parentMsg"></mode-list>
                                </el-tab-pane>
                                <el-tab-pane label="施工图" name="constr" :lazy="true">
                                    <mode-list length="12" toUrl="modeInfoConstr" modeType="3" @parentInfo="parentMsg"></mode-list>
                                </el-tab-pane>
                                <!-- <el-tab-pane label="预算方案" name="budget" :lazy="true">
                                    <mode-list length="12" toUrl="modeInfoBudget" modeType="5"></mode-list>
                                </el-tab-pane> -->
                                <el-tab-pane label="概念方案" name="concept" :lazy="true">
                                    <mode-list length="12" toUrl="modeInfoConcept" modeType="4" @parentInfo="parentMsg"></mode-list>
                                </el-tab-pane>
                            </el-tabs>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane label=" 创作历程 " name="creaProcess" :lazy="true">
                        <crea-process-list></crea-process-list>
                    </el-tab-pane>
                </el-tabs>
                
            </div>
        </section>
    </div>
</template>
<script>
import loading from '../loading'
import searchTitle  from '../searchTitle/searchTitle'
import modeList from './modeList'
import creaProcessList from './ceraProcess'
    export default{
        name : "author",
        data () {
            return {
                msg : "我是作者",
                activeName: 'presWorks',
                activeName2 : "3DMode",
                indexMsg:null,
                userInfo:null,
                titleMsg : '_集设网',//标题
                descriptionMsg : "",//描述
                myHome:this.$route.query.id||'',
            }
        },
        components : {
            loading,
            page:resolve => require(["../page"], resolve),//翻页
            searchTitle,
            modeList,//案例列表
            creaProcessList,//历程列表
        },
        methods:{
             handleClick(tab, event) {
                // console.log(tab, event);
            },
            handleClick2(tab, event) {
                // console.log(tab, event);
            },
            parentMsg(msg){
                this.userInfo = msg.data.userinfo;
                this.titleMsg = this.userInfo.name+"_集设网";
                this.descriptionMsg = this.userInfo.sign;
            }
        },
        watch:{
            $route(to,from){
                /* axios.get("/usershow/"+to.query.id+"/1/getitems").then(response=>{
                    this.userInfo = response.data.userinfo;
                    this.titleMsg = this.userInfo.name+"- 集设网";
                    this.descriptionMsg = this.userInfo.sign;
                }) */
                location. reload();
            }

        },
        created() {
            /* axios.get("/usershow/"+this.$route.query.id+"/1/getitems").then(response=>{
                this.userInfo = response.data.userinfo;
                this.titleMsg = this.userInfo.name+"_集设网";
                this.descriptionMsg = this.userInfo.sign;
            }) */
        },
        metaInfo () {
            return {
                title: this.titleMsg,
                meta: [
                    {                 // set meta
                        name: 'description',
                        content: this.descriptionMsg
                    }
                ]
            }
        },
    }
</script>
<style>
.authorBox{
    padding-top:71px;
}
.authorHead{
    height: 152px;
    margin: 22px 0;
    background-color: #fff;
}
.authorHeadLeft{
    float: left;
    width: 450px;
}
.authorHeadRight{
    float: right;
}
.authorTitle{
    float: left;
    height: 80px;
    margin: 37px 0 0 37px;
}
.authorTitle img{
    width: 80px;
    height: 80px;
    border-radius: 40px;
}
.authorInfo{
    float: left;
    width: 300px;
    overflow: hidden;

}
.authorInfo p:nth-of-type(1){
    font-size: 18px;
    line-height: 34px;
    color: #333333;
    margin-top: 48px;
    margin-left: 20px;
    font-weight: 200;
}
.authorInfo p:nth-of-type(2){
    font-size: 14px;
    line-height: 30px;
    color: #676767;
    margin-left: 14px;
}
.authorHeadRight p:nth-of-type(1){
    width: 95px;
    font-size: 36px;
    line-height: 36px;
    font-weight: bold;
    text-align: center;
}
.authorHeadRight p:nth-of-type(1){
    font-size: 18px;
    line-height: 30px;
    color: #333333;
    margin: 43px 0px 0 0;
}
.authorHeadRight p:nth-of-type(2){
    text-align: center;
}


.authorBox .el-tabs__nav-scroll{
        text-align: center;
}
.authorBox .el-tabs__nav{
    float: none;
    display: inline-block;
}
.authorBox .el-tabs--border-card>.el-tabs__header{
    height: 60px;
    background: transparent;
}
.authorBox .el-tabs--border-card>.el-tabs__header .el-tabs__item{
    border:none;
    height: 60px;
    font-size: 18px;
    line-height: 60px;
    padding: 0 15px;
    margin-right: 60px;
}
.authorBox .el-tabs--border-card>.el-tabs__header .el-tabs__item.is-active{
    color: #ea514b;
    border-bottom: 2px solid #ea514b;
}
.authorBox .el-tabs--border-card{
    box-shadow: none;
    border: none;
}
.authorBox .el-upload__input{
    display: none!important;
}
.authorBox .el-tabs__item.is-active{
    color: #ea514b;
    border-bottom:2px solid #ea514b;
}
.authorBox .el-tabs__active-bar{
    background: #ea514b;
    display: none;
}
.authorBox .el-tabs__item{
    font-size: 20px;
    line-height: 54px;
    height:54px;
    padding: 0 15px!important;
    margin: 0 100px;
}
.authorBox .el-tabs__item:hover{
    color: #ea514b;
}
.authorBox .el-tabs__nav-wrap::after{
    background: #efefef!important;
}



.authorContent{
    background-color: #fff;
    margin-bottom: 25px;
}
.presListBox{
    padding-left: 46px;
    padding-right: 46px;
}
.presTime{
   float: left;
}
 .presTimeInfo{
    float: left;
    width: 137px;
    height: 200px;
    background: #ea514b;
    color: #fff;
    border-radius: 4px;
    padding-top: 46px;
    text-align: center;
}
.presMonth{
    font-size: 44px;
    line-height: 64px;
}
.presYear{
    font-size: 20px;
    line-height: 30px;
}
.presList{
    padding: 50px 0;
    border-bottom: 1px solid #ddd;
}
.presListChild{
    float: right;
    width: 900px;
}
.presListChildList{
    float:left;
    position: relative;
    width: 200px;
    height: 200px;
    border-radius: 4px;
    overflow: hidden;
    margin-right: 20px;
    margin-bottom: 20px;
}
.presListChildListImg img{
    width: 200px;
    height: 200px;
}
.presListChildListStatus{
    width: 66px;
    height: 26px;
    background: #ea514b;
    position: absolute;
    top: 10px;
    right: 29px;
    font-size: 14px;
    line-height: 26px;
    color: #fff;
    text-align: center;
    border-radius: 2px;
    z-index: 9;
}
.presListChildListText{
    font-size: 16px;
    line-height: 50px;
    color: #fff;
    text-align: center;
    position: absolute;
    bottom: 0;
    width: 100%;
    background: rgba(0,0,0,.15);
    height: 100%;
    vertical-align: bottom;
    padding-top: 150px;
}

.presWorksChild{
    padding-left: 3px;
    margin-right: -20px;
}
.presWorksChild .el-tabs__item{
    font-size: 18px;
    line-height: 74px;
    height: 74px;
    padding: 0 0px!important;
    margin: 0 15px;
}
.presWorksChild .el-tabs__item.is-active{
    border-bottom: none;
}
.presWorksChild .el-tabs__nav{
    float: left;
}
.presWorksChild .el-tabs__nav-wrap::after{
    background: transparent!important;
}

</style>
